<template>
  <Dialog v-model="dialogVisible" title="阶段结算" width="1100" height="100">
    <el-table
      v-loading="loading"
      ref="refExpire"
      :data="list"
      style="width: 100%"
      max-height="250"
      :cell-style="{ height: '60px' }"
    >
      <el-table-column prop="stage" label="阶段" style="width: 60px" />
      <el-table-column prop="expires" label="期限(天)" />
      <el-table-column prop="amount" label="结算金额(元)" />
      <el-table-column prop="percentum" label="占总额百分比(%)" />
      <el-table-column prop="states" label="付款状态">
        <template #default="{ row }">
          <el-select v-model="row.states" placeholder="付款状态" style="width: 100px">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="付款日期">
        <template #default="{ row }">
          <el-date-picker
            v-model="row.date"
            type="date"
            placeholder="付款日期"
            style="width: 140px"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="deleteRowStage(scope.$index)">
            移除
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <template #footer>
      <!-- <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> -->
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as CopyrightApi from '@/api/copyright/copyright'

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const refExpire = ref() // 表单 Ref
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

/** 付款状态 */
const stateOptions = [
  {
    value: '0',
    label: '已付款'
  },
  {
    value: '1',
    label: '待付款'
  }
]
/** 移除阶段 */
const deleteRowStage = (index: number) => {
  // handleDelete(list.value[index].id)
  list.value.splice(index, 1)
}
//失焦事件，使用事件对象拿到dom元素并进行后续样式的修改
const iptBlur = (value: any, e: any) => {
  console.log(value)
}
/** 多选 */
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
/** 列表数据 */
const list = ref([])
/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  getList(id)
}

/** 查询列表 */
const getList = async (id: number) => {
  loading.value = true
  try {
    const data = await CopyrightApi.getCopyrightStages(id)
    list.value = data
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 提交按钮操作 */
const submitForm = async () => {
  if (multipleSelection.value.length == 0) {
    return message.error('请选择要下载的资源！')
  } else {
    return message.success(t('功能未开发！'))
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
